<template>
	<view class="admin-container">
		<!-- 顶部导航 -->
		<view class="header-sticky">
			<view class="header">
				<view class="header-left">
					<text class="iconfont icon-ticket"></text>
					<text class="title">排队管理（平板端）</text>
				</view>

				<!-- 右侧固定操作区 -->
				<view class="header-ctrl">
					<input v-model="shopId" disabled="false" class="shop-input" placeholder="门店ID" @confirm="onSearch" />
					<button class="btn-search" @tap="onSearch">查询</button>
					<button class="btn-history" @tap="goHistory">历史</button>
				</view>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-container">
			<view class="stat-card">
				<text class="label">当前排队</text>
				<text class="value">{{ totalQueue }}</text>
			</view>
			<view class="stat-card">
				<text class="label">正在叫号</text>
				<text class="value">{{ processing }}</text>
			</view>
			<view class="stat-card">
				<text class="label">今日完成</text>
				<text class="value">{{ completed }}</text>
			</view>
		</view>

		<!-- 筛选 / 手动取号 -->
		<view class="filter-bar">
			<picker mode="selector" :range="statusOptions" @change="onStatusChange">
				<view class="picker-btn">{{ statusLabel }}</view>
			</picker>
			<!-- <picker mode="selector" :range="typeDisplayOptions" @change="onTypeChange">
				<view class="picker-btn">{{ typeLabel }}</view>
			</picker> -->
			<button class="manual-btn" @tap="openManualModal">手动取号</button>
		</view>

		<!-- 列表 -->
		<scroll-view scroll-y class="queue-list" refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<view v-for="item in rows" :key="item.id" class="queue-item">
				<!-- 中间信息区 -->
				<view class="info-horizontal">
					<!-- 留号红点标记 -->
					<view class="keep-sign" v-if="item.status === 5">
						<text class="keep-text">留</text>
					</view>
					<text class="info-code">{{ item.code }}</text>
					<text class="info-time">{{ formatTime(item.createdOn) }}</text>
					<text class="info-phone">{{ item.userName ? item.userName : item.phone }}</text>
					<text class="info-phone">排队{{ item.consumerNum }}人</text>
					<text class="info-wait">等待{{ getWaitTime(item.createdOn) }}</text>
					<text class="info-alarm">叫号{{ item.alarmTimes }}次</text>
					<text class="info-alarm">前方剩余{{ item.frontCount }}人</text>
				</view>

				<!-- 右侧按钮区 -->
				<view class="btn-group">
					<!-- 始终显示的按钮 -->
					<button class="action-btn process" @tap="setStatus(item.id, 1)">叫号</button>
					<button v-if="item.status === 1 || item.status === 5" class="action-btn finish"
						@tap="setStatus(item.id, 4)">完成</button>

					<!-- 动态显示的按钮容器 -->
					<view class="dynamic-buttons" :class="{ 'expanded': item.showMore }">
						<!-- 隐藏的按钮 -->
						<button v-if="item.status === 0 || item.status === 1 || item.status === 5"
							class="action-btn complete" @tap="setStatus(item.id, 2)">取消</button>
						<button v-if="item.status === 0 || item.status === 1 || item.status === 5"
							class="action-btn cancel" @tap="setStatus(item.id, 3)">超时</button>
						<button v-if="item.status === 0 || item.status === 1" class="action-btn keep"
							@tap="setKeepStatus(item.id, 5)">留号</button>
					</view>

					<!-- 省略号按钮 -->
					<button v-if="hasHiddenButtons(item)" class="more-btn" @tap="toggleMore(item)">
						...
					</button>
				</view>
			</view>
			<view v-if="loading" class="load-more">加载中…</view>
			<view v-if="!hasMore && !loading && rows.length" class="load-more">没有更多了</view>
		</scroll-view>

		<!-- 手动取号弹框 -->
		<view v-if="manualVisible" class="modal-mask" @tap="closeManualModal">
			<view class="modal-box" @tap.stop>
				<text class="modal-title">手动取号</text>
				<!-- <view class="table-type-container">
					<text class="num-label">桌型选择：</text>
					<view class="table-type-buttons">
						<button v-for="(type, index) in tableTypeOptions" :key="index"
							:class="['type-btn', { 'active': manualType === index }]" @tap="manualType = index">
							{{ type.text }}
						</button>
					</view>
				</view> -->
				<!-- 新增用餐人数选择按钮组 -->
				<!-- <view class="consumer-num-container">
					<text class="num-label">用餐人数：</text>
					<view class="num-buttons">
						<button v-for="num in 7" :key="num"
							:class="['num-btn', { 'active': manualConsumerNum === num }]"
							@tap="manualConsumerNum = num">
							{{ num }}人
						</button>
					</view>
				</view> -->
				<input class="modal-input" v-model="manualPhone" type="number" placeholder="请输入手机号" />
				<view class="modal-actions">
					<button class="modal-btn cancel" @tap="closeManualModal">取消</button>
					<button class="modal-btn confirm" @tap="submitManualTicket">生成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 原有脚本内容保持不变
	const USE_MOCK = false;
	const fmtDate = () => {
		const d = new Date()
		return `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}`
	}

	export default {
		data() {
			return {
				shopId: '',
				statusOptions: ['全部状态', '排队中', '叫号中', '已取消', '已超时', '已完成', '留号'],
				typeOptions: ['全部类型', 'A类', 'B类', 'C类'],
				typeDisplayOptions: ['全部类型', '小桌', '中桌', '大桌'],
				manualTypeOptions: ['A类', 'B类', 'C类'],
				statusFilter: 'all',
				typeFilter: 'all',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				rows: [],
				loading: false,
				refreshing: false,
				hasMore: true,
				manualVisible: false,
				manualType: 0,
				manualPhone: '',
				manualConsumerNum: 1,
				selectedIds: [],
				totalQueue: 0,
				processing: 0,
				completed: 0,
				timer: null,
				tableTypeOptions: [{
						text: '小桌',
						value: 'A'
					},
					{
						text: '中桌',
						value: 'B'
					},
					{
						text: '大桌',
						value: 'C'
					}
				],
				manualType: 0, // 默认选中小桌（对应A）
			}
		},
		computed: {
			statusLabel() {
				const idx = this.statusFilter === 'all' ? 0 : this.statusFilter + 1
				return this.statusOptions[idx]
			},
			typeLabel() {
				const map = {
					all: 0,
					A: 1,
					B: 2,
					C: 3,
				}
				return this.typeDisplayOptions[map[this.typeFilter]]
			}
		},
		onLoad() {
			// 仅在 5+ App 环境下执行屏幕旋转
			if (typeof plus !== 'undefined') {
				plus.screen.lockOrientation('landscape-primary');
			}
			this.shopId = 'xshsg06'
			//this.shopId = getApp().globalData?.shopId || ''
			if (!this.shopId) {
				uni.showModal({
					title: '提示',
					content: '',
					editable: true,
					placeholderText: '请输入门店ID',
					success: (res) => {
						if (res.confirm && res.content) {
							this.shopId = res.content
							getApp().globalData.shopId = res.content
							this.fetchData('refresh')
							this.startAutoRefresh()
						}
					}
				})
			} else {
				this.fetchData('refresh')
				this.startAutoRefresh()
			}
		},
		onUnload() {
			this.stopAutoRefresh()
		},
		methods: {
			onTypeChange(e) {
				// 更新类型映射：0=全部，1=小桌(A)，2=中桌(B)，3=大桌(C)
				const map = ['all', 'A', 'B', 'C']
				this.typeFilter = map[e.detail.value]
				this.fetchData('refresh')
			},
			// 判断是否有需要隐藏的按钮
			hasHiddenButtons(item) {
				const hasComplete = item.status === 0 || item.status === 1 || item.status === 5
				const hasCancel = item.status === 0 || item.status === 1 || item.status === 5
				const hasKeep = item.status === 0 || item.status === 1
				return hasComplete || hasCancel || hasKeep
			},

			// 切换更多按钮显示状态
			toggleMore(item) {
				this.$set(item, 'showMore', !item.showMore)
			},

			getWaitTime(iso) {
				const min = Math.floor((Date.now() - new Date(iso).getTime()) / 1000 / 60);
				if (min < 1) return '刚刚';
				if (min < 60) return `${min}分钟`;
				const h = Math.floor(min / 60);
				return `${h}小时${min % 60}分钟`;
			},
			goHistory() {
				if (!this.shopId) {
					uni.showToast({
						title: '请先输入门店ID',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/HistoryFront/History?shopId=${this.shopId}`
				})
			},
			startAutoRefresh() {
				this.timer = setInterval(() => {
					this.fetchData('refresh')
				}, 30 * 1000)
			},
			stopAutoRefresh() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			onSearch() {
				if (!this.shopId) {
					uni.showToast({
						title: '请输入门店ID',
						icon: 'none'
					})
					return
				}
				getApp().globalData.shopId = this.shopId
				this.fetchData('refresh')
			},
			async fetchData(action = 'refresh') {
				if (action === 'refresh') {
					this.refreshing = true
					this.pageNum = 1
				} else {
					this.loading = true
				}
				if (USE_MOCK) {
					await this.mockFetch(action)
				} else {
					const params = {
						PageIndex: this.pageNum,
						PageSize: this.pageSize,
						ShopId: this.shopId,
						Date: fmtDate(),
						Status: this.statusFilter === 'all' ? '' : this.statusFilter,
						Type: this.typeFilter === 'all' ? '' : this.typeFilter
					}
					const {
						data
					} = await uni.request({
						url: 'http://ziyan.xshhotels.cn:8981/api/QueueFront/PagingQueue',
						method: 'GET',
						data: params
					})
					this.parseRes(data, action)
				}
				const {
					data
				} = await uni.request({
					url: 'http://ziyan.xshhotels.cn:8981/api/QueueFront/PagingQueueDetail',
					method: 'GET',
					data: {
						shopId: this.shopId
					}
				})
				this.parseDetailRes(data, action)

				this.refreshing = false
				this.loading = false
			},
			parseDetailRes(res, action) {
				const {
					asking,
					isFinished
				} = res
				this.processing = asking;
				this.completed = isFinished;
			},
			parseRes(res, action) {
				const {
					total,
					rows
				} = res
				this.total = total
				// 为每条数据添加showMore状态
				const processedRows = rows.map(row => ({
					...row,
					showMore: false
				}))
				if (action === 'refresh') {
					this.rows = processedRows
				} else {
					this.rows.push(...processedRows)
				}
				this.hasMore = this.rows.length < total
				this.updateStats()
			},
			async mockFetch(action) {
				await new Promise(r => setTimeout(r, 300))
				const mock = {
					total: 7,
					rows: [{
							id: 'af61d348603c8605',
							code: 'B1',
							shopId: '002',
							status: 0,
							createdOn: '2025-09-05T08:59:31',
							type: 'B',
							date: 20250905,
							phone: '18521502147',
							userId: '',
							alarmTimes: 0
						},
						{
							id: '36e0d2f47f6fc17c',
							code: 'A4',
							shopId: '002',
							status: 1,
							createdOn: '2025-09-04T17:47:39',
							type: 'A',
							date: 20250904,
							phone: '18521502147',
							userId: '',
							alarmTimes: 0
						},
						{
							id: 'a172d1068e7ea7cc',
							code: 'small4',
							shopId: '002',
							status: 5,
							createdOn: '2025-09-04T17:04:45',
							type: 'small',
							date: 20250904,
							phone: '18521502598',
							userId: '',
							alarmTimes: 0
						}
					]
				}
				// 为模拟数据添加showMore状态
				mock.rows = mock.rows.map(row => ({
					...row,
					showMore: false
				}))
				this.parseRes(mock, action)
			},
			onRefresh() {
				this.fetchData('refresh')
			},
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.pageNum++
					this.fetchData('append')
				}
			},
			onStatusChange(e) {
				const idx = e.detail.value
				this.statusFilter = idx === 0 ? 'all' : idx - 1
				this.fetchData('refresh')
			},
			// onTypeChange(e) {
			// 	const map = ['all', 'A', 'B', 'C', 'small', 'medium', 'large']
			// 	this.typeFilter = map[e.detail.value]
			// 	this.fetchData('refresh')
			// },
			async setStatus(id, status) {
				if (USE_MOCK) {
					const item = this.rows.find(i => i.id === id)
					if (item) {
						item.status = status
						item.showMore = false // 操作后关闭展开状态
					}
					this.updateStats()
					uni.showToast({
						title: ['排队中', '叫号中', '已取消', '已超时', '完成', '留号'][status],
						icon: 'none'
					})
					return
				}
				if (status == 1) {
					await uni.request({
						url: 'http://ziyan.xshhotels.cn:8981/api/QueueFront/Asking',
						method: 'GET',
						data: {
							id
						}
					})
				} else {
					await uni.request({
						url: 'http://ziyan.xshhotels.cn:8981/api/QueueFront/DeleteQueue',
						method: 'GET',
						data: {
							id,
							status
						}
					})
				}
				this.fetchData('refresh')
			},
			async setKeepStatus(id, status) {
				if (USE_MOCK) {
					const item = this.rows.find(i => i.id === id)
					if (item) {
						item.status = status
						item.showMore = false // 操作后关闭展开状态
					}
					this.updateStats()
					uni.showToast({
						title: '已设置为留号',
						icon: 'none'
					})
					return
				}
				await uni.request({
					url: `http://ziyan.xshhotels.cn:8981/api/QueueFront/Keep?id=${id}`,
					method: 'GET'
				})
				this.fetchData('refresh')
				uni.showToast({
					title: '已设置为留号',
					icon: 'none'
				})
			},
			batchSetStatus(status) {
				this.selectedIds.forEach(id => this.setStatus(id, status))
				this.selectedIds = []
			},
			toggleSelect(id) {
				const i = this.selectedIds.indexOf(id)
				i > -1 ? this.selectedIds.splice(i, 1) : this.selectedIds.push(id)
			},
			openManualModal() {
				this.manualVisible = true
				this.manualConsumerNum = 1
			},
			closeManualModal() {
				this.manualVisible = false
				this.manualPhone = ''
			},
			async submitManualTicket() {
				if (!this.manualPhone.match(/^1[3-9]\d{9}$/)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
					return
				}
				const type = ['A', 'B', 'C', 'small', 'medium', 'large'][this.manualType]
				if (USE_MOCK) {
					const newCode = type + (Math.floor(Math.random() * 900) + 100)
					this.rows.unshift({
						id: 'manual-' + Date.now(),
						code: newCode,
						type,
						status: 0,
						createdOn: new Date().toISOString(),
						phone: this.manualPhone,
						shopId: this.shopId,
						date: Number(new Date().toISOString().slice(0, 10).replace(/-/g, '')),
						userId: '',
						alarmTimes: 0,
						showMore: false // 新增数据初始化状态
					})
					this.total++
					this.closeManualModal()
					this.updateStats()
					uni.showToast({
						title: `生成号码：${type}-${newCode}`,
						icon: 'success'
					})
					return
				}
				await uni.request({
					url: 'http://ziyan.xshhotels.cn:8981/api/QueueFront/AddQueue',
					method: 'POST',
					data: {
						shopId: this.shopId,
						type,
						phone: this.manualPhone,
						consumerNum: this.manualConsumerNum,
						userId: ''
					}
				})
				this.closeManualModal()
				this.fetchData('refresh')
			},
			updateStats() {
				this.totalQueue = this.rows.filter(i => i.status === 0 || i.status === 1 || i.status === 5).length
			},
			formatTime(iso) {
				const d = new Date(iso)
				return `${d.getMonth()+1}/${d.getDate()} ${d.getHours()}:${d.getMinutes().toString().padStart(2,'0')}`
			}
		}
	}
</script>

<style scoped>
	.table-type-container {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}
	
	.table-type-buttons {
		display: flex;
		gap: 16rpx;
	}
	
	.type-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		background-color: #e8f5e9;
		color: #069c29;
		border: 2px solid #dcedc8;
		padding: 0;
		transition: all 0.2s;
	}
	
	.type-btn.active {
		background-color: #2ecc71;
		color: white;
		border-color: #069c29;
		box-shadow: 0 4px 12px rgba(6, 156, 41, 0.3);
	}
	
	.type-btn:active {
		transform: scale(0.96);
	}
	
	.consumer-num-container {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}
	
	.num-label {
		display: block;
		font-size: 30rpx;
		color: #1b5e20;
		margin-bottom: 16rpx;
		padding-left: 10rpx;
	}
	
	.num-buttons {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}
	
	.num-btn {
		width: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		background-color: #e8f5e9;
		color: #069c29;
		border: 2px solid #dcedc8;
		padding: 0;
		transition: all 0.2s;
	}
	
	.num-btn.active {
		background-color: #2ecc71;
		color: white;
		border-color: #069c29;
		box-shadow: 0 4px 12px rgba(6, 156, 41, 0.3);
	}
	
	.num-btn:active {
		transform: scale(0.96);
	}
	
	/* 基础样式 - 改为绿色系风格 */
	.admin-container {
		padding: 0;
		background-color: #f1f8e9;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}
	
	/* 顶部导航 - 改为绿色系 */
	.header-sticky {
		position: sticky;
		top: 0;
		z-index: 999;
		background: #2ecc71;
		box-shadow: 0 2px 8px rgba(6, 156, 41, 0.2);
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		color: #fff;
	}
	
	.header-left {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}
	
	.icon-ticket::before {
		content: '🎫';
		font-size: 44rpx;
	}
	
	.title {
		font-size: 38rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}
	
	.header-ctrl {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}
	
	.shop-input {
		background: rgba(255, 255, 255, 0.25);
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		width: 180rpx;
		font-size: 28rpx;
		border: none;
		transition: background 0.3s;
	}
	
	.shop-input::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}
	
	.shop-input:focus {
		background: rgba(255, 255, 255, 0.35);
		outline: none;
	}
	
	.btn-search,
	.btn-history {
		background: #fff;
		color: #069c29;
		padding: 10rpx 22rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		border: none;
		font-weight: 500;
		transition: all 0.2s;
	}
	
	.btn-search:active,
	.btn-history:active {
		background: #e8f5e9;
		transform: scale(0.98);
	}
	
	/* 统计卡片 - 采用绿色系和大圆角 */
	.stats-container {
		display: flex;
		gap: 24rpx;
		padding: 24rpx;
	}
	
	.stat-card {
		flex: 1;
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 30rpx;
		text-align: center;
		box-shadow: 0 4px 12px rgba(6, 156, 41, 0.1);
		transition: transform 0.3s, box-shadow 0.3s;
	}
	
	.stat-card:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6px 16px rgba(6, 156, 41, 0.15);
	}
	
	.label {
		font-size: 28rpx;
		color: #1b5e20;
		display: block;
		margin-bottom: 12rpx;
	}
	
	.value {
		font-size: 52rpx;
		font-weight: 700;
		color: #069c29;
		line-height: 1.2;
	}
	
	/* 筛选栏样式 - 与示例图片保持一致的按钮风格 */
	.filter-bar {
		display: flex;
		gap: 24rpx;
		padding: 0 24rpx 24rpx;
	}
	
	.picker-btn {
		flex: 1;
		background: #fff;
		padding: 22rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 30rpx;
		color: #1b5e20;
		box-shadow: 0 2px 6px rgba(6, 156, 41, 0.1);
		transition: all 0.2s;
		border: 2px solid #dcedc8;
	}
	
	.picker-btn:active {
		background: #e8f5e9;
		color: #069c29;
		border-color: #c8e6c9;
	}
	
	.manual-btn {
		flex: 1;
		background: linear-gradient(135deg, #2ecc71 0%, #069c29 100%);
		color: white;
		padding: 22rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 30rpx;
		border: none;
		box-shadow: 0 4px 12px rgba(6, 156, 41, 0.3);
		transition: all 0.2s;
	}
	
	.manual-btn:active {
		background: #27ae60;
		transform: scale(0.98);
	}
	
	/* 列表区域 - 采用柔和的背景和大圆角 */
	.queue-list {
		height: calc(100vh - 480rpx);
		background-color: #f1f8e9;
	}
	
	.queue-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 24rpx;
		margin: 0 24rpx 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
		transition: transform 0.2s, box-shadow 0.2s;
	}
	
	.queue-item:active {
		transform: translateY(-1rpx);
		box-shadow: 0 4px 12px rgba(6, 156, 41, 0.15);
	}
	
	/* 留号标记 - 采用绿色系 */
	.keep-sign {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background-color: #2ecc71;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 12rpx;
	}
	
	.keep-text {
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	/* 信息区布局 */
	.info-horizontal {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 12rpx;
		gap: 24rpx;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	
	.info-code {
		font-size: 38rpx;
		font-weight: 700;
		min-width: 100rpx;
		color: #069c29;
	}
	
	.info-time {
		font-size: 28rpx;
		color: #1b5e20;
		min-width: 140rpx;
		white-space: nowrap;
	}
	
	.info-phone {
		font-size: 28rpx;
		color: #2ecc71;
		min-width: 160rpx;
		white-space: nowrap;
	}
	
	.info-consumer {
		font-size: 28rpx;
		color: #1b5e20;
		min-width: 160rpx;
		white-space: nowrap;
	}
	
	.info-wait {
		font-size: 28rpx;
		color: #66bb6a;
		min-width: 140rpx;
		white-space: nowrap;
	}
	
	.info-alarm {
		font-size: 26rpx;
		color: #52c41a;
		min-width: 120rpx;
		white-space: nowrap;
	}
	
	/* 按钮组 - 采用圆角和绿色系 */
	.btn-group {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
	}
	
	/* 动态按钮容器样式 */
	.dynamic-buttons {
		display: inline-flex;
		gap: 12rpx;
		transition: all 0.3s ease-out;
		transform: translateX(100%);
		opacity: 0;
		position: absolute;
		right: 60rpx;
	}
	
	.dynamic-buttons.expanded {
		transform: translateX(0);
		opacity: 1;
		position: relative;
		right: 0;
	}
	
	/* 省略号按钮样式 */
	.more-btn {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		color: #666;
		font-size: 30rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-left: 8rpx;
		flex-shrink: 0;
		transition: all 0.2s;
	}
	
	.more-btn:active {
		background-color: #e8e8e8;
	}
	
	.action-btn {
		padding: 12rpx 22rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #fff;
		white-space: nowrap;
		border: none;
		transition: all 0.2s;
	}
	
	.action-btn:active {
		transform: scale(0.96);
		opacity: 0.9;
	}
	
	.process {
		background: #66bb6a;
	}
	
	.complete {
		background: #52c41a;
	}
	
	.cancel {
		background: #2ecc71;
	}
	
	.finish {
		background: #069c29;
	}
	
	.keep {
		background: #43a047;
	}
	
	/* 加载提示 */
	.load-more {
		text-align: center;
		padding: 30rpx;
		font-size: 28rpx;
		color: #1b5e20;
	}
	
	/* 弹窗样式 - 与示例图片保持一致的风格 */
	.modal-mask {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(4rpx);
	}
	
	.modal-box {
		background: #fff;
		border-radius: 30rpx;
		padding: 40rpx;
		width: 80vw;
		max-width: 600rpx;
		box-shadow: 0 10px 25px rgba(6, 156, 41, 0.2);
		transform: translateY(-20rpx);
		animation: modalIn 0.3s forwards;
	}
	
	@keyframes modalIn {
		to {
			transform: translateY(0);
		}
	}
	
	.modal-title {
		display: block;
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 36rpx;
		color: #069c29;
	}
	
	.modal-input {
		border: 2px solid #dcedc8;
		padding: 24rpx;
		border-radius: 50rpx;
		width: 95%;
		margin: 24rpx 0;
		font-size: 30rpx;
		transition: border 0.3s;
	}
	
	.modal-input:focus {
		border-color: #2ecc71;
		outline: none;
	}
	
	.modal-actions {
		display: flex;
		gap: 24rpx;
		margin-top: 16rpx;
	}
	
	.modal-btn {
		flex: 1;
		padding: 22rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 32rpx;
		border: none;
		transition: all 0.2s;
	}
	
	.modal-btn.confirm {
		background: linear-gradient(135deg, #2ecc71 0%, #069c29 100%);
		color: #fff;
	}
	
	.modal-btn.confirm:active {
		background: #27ae60;
	}
	
	.modal-btn.cancel {
		background: #e8f5e9;
		color: #1b5e20;
	}
	
	.modal-btn.cancel:active {
		background: #dcedc8;
	}
</style>